<script setup>
import { computed } from 'vue'
import Color from 'color'

const props = defineProps({
  width: { type: Number, default: 100 },
  height: { type: Number, default: 100 },
  thickness: { type: Number, default: 100 },
  background: { type: String, default: '#000' },
  frontExtraStyle: Object
})

const boxStyle = computed(() => ({
  width: `${props.width}px`,
  height: `${props.height}px`
}))

const frontStyle = computed(() => ({
  width: `${props.width}px`,
  height: `${props.height}px`,
  top: 0,
  left: 0,
  transform: `translateZ(${props.thickness}px)`,
  backgroundColor: props.background,
  border: `thin solid ${Color(props.background).negate().toString()}`,
  ...props.frontExtraStyle
}))

const backStyle = computed(() => ({
  width: `${props.width}px`,
  height: `${props.height}px`,
  top: 0,
  left: 0,
  backgroundColor: props.background,
  border: `thin solid ${Color(props.background).negate().toString()}`
}))

const leftStyle = computed(() => ({
  width: `${props.thickness}px`,
  height: `${props.height}px`,
  top: 0,
  left: 0,
  transformOrigin: 'left',
  transform: `rotateY(-90deg)`,
  backgroundColor: props.background,
  border: `thin solid ${Color(props.background).negate().toString()}`
}))

const rightStyle = computed(() => ({
  width: `${props.thickness}px`,
  height: `${props.height}px`,
  top: 0,
  right: 0,
  transformOrigin: 'right',
  transform: `rotateY(90deg)`,
  backgroundColor: props.background,
  border: `thin solid ${Color(props.background).negate().toString()}`
}))

const topStyle = computed(() => ({
  width: `${props.width}px`,
  height: `${props.thickness}px`,
  top: 0,
  left: 0,
  transformOrigin: 'top',
  transform: `rotateX(90deg)`,
  backgroundColor: props.background,
  border: `thin solid ${Color(props.background).negate().toString()}`
}))

const bottomStyle = computed(() => ({
  width: `${props.width}px`,
  height: `${props.thickness}px`,
  bottom: 0,
  left: 0,
  transformOrigin: 'bottom',
  transform: `rotateX(-90deg)`,
  backgroundColor: props.background,
  border: `thin solid ${Color(props.background).negate().toString()}`
}))
</script>

<template>
  <div class="box" :style="boxStyle">
    <div class="left" :style="leftStyle"></div>
    <div class="right" :style="rightStyle"></div>
    <div class="top" :style="topStyle"></div>
    <div class="bottom" :style="bottomStyle"></div>
    <div class="front" :style="frontStyle">
      <slot></slot>
    </div>
    <div class="back" :style="backStyle"></div>
  </div>
</template>

<style lang="sass" scoped>

.box
  position: relative
  transform-style: preserve-3d
  .left,.right,.top,.bottom,.front,.back
    position: absolute
    transition: all 0.3s ease
</style>